<template>
  <div class="result">
    <hmttNavBar
      title="搜索结果"
      path="/home/questions"
      icon="&#xe6b0;"
    ></hmttNavBar>
    <div class="title">{{ q }}</div>
    <div class="content" v-for="(item, index) in list" :key="index">
      <!-- <h3 @click="$router.push('/home/article/' + item.art_id)"> -->
      <h3 @click="$router.push('/home/article/')">
        {{ item.title }}
      </h3>
      <div class="bottom">
        <span class="b1">{{ item.aut_name }} </span>
        <span class="b2"
          ><i>{{ item.comm_count }}</i> 评论
        </span>
        <span class="b3"> {{ item.pubdate | formatTime }}</span>
      </div>
      <div class="other">
        <span class="o1"
          ><i class="iconfont" @click="reComment">&#xe61e;</i
          >{{ item.comm_count }}</span
        >
        <span class="o2" @click="starClick"
          ><i class="iconfont">&#xe603;</i>点赞</span
        >
        <span class="o3" @click="share"
          ><i class="iconfont">&#xe61c;</i>分享</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { search } from '@/api/questions'
import { getLocal } from '@/utils/local.js'
import moment from 'moment'
export default {
  data () {
    return {
      // q: this.$route.query.path, // 普通路由传参
      q: this.$route.params.q, // 动态路由传参

      list: [] // 需要渲染的内容列表
    }
  },
  // 一进入页面就调用搜索内容
  async created () {
    const res = await search({ q: this.q })
    console.log(res)
    this.list = res.data.data.results
    console.log(this.$route)
  },
  methods: {
    // 点击对应文章跳转
    // articleClick () {
    //   this.$router.push('/home/article')
    //   window.console.log('点击')
    // },
    // 分享
    share () {
      // // 登录判断
      // if (!this.$login()) {
      //   // 未登录
      //   return
      // }
      console.log('分享')
    },
    // 评论
    reComment () {
      console.log('评论')
      const token = getLocal('token')
      if (!token || !token.token) {
        this.$toast.fail('对不起,您还没有登录')
        this.$router.push('/login')
        return
      }
      console.log('评论')
    },
    // 点赞
    starClick () {
      console.log('点赞')
      // console.log('this.$route', this.$route)
      // console.log('this.$router', this.$router.config)
    }
  },
  // 过滤时间
  filters: {
    formatTime (str) {
      const a = moment()
      const b = moment(str)
      const _diff = a.diff(b, 'h')
      if (_diff <= 1) {
        return '刚刚'
      } else if (_diff < 24) {
        return _diff + '小时前'
      } else {
        return moment(str).format('YYYY/MM/DD')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.result {
  font-size: 16px;
  .content {
    padding: 35px 15px 15px;
    h3 {
      padding-bottom: 25px;
    }
    .bottom {
      padding-bottom: 15px;
      span {
        padding-right: 5px;
        i {
          font-style: normal;
        }
      }
    }
    .other {
      display: flex;
      padding: 10px;
      span {
        flex: 1;
        .iconfont {
          font-size: 24px;
          padding-right: 8px;
        }
      }
    }
  }
}
</style>
